<template>
  <div class="newMusic">
      <input type="text" v-model="inputValue" @keyup.enter="search" placeholder="请输入搜索歌曲">
    <!-- 歌曲列表 -->
    <songList ref="songList"></songList>
  </div>
</template>

<script>
// 组件套用组件
// 导入组件
import songList from '../components/songList'
// import axios from 'axios'
import {getSong,getSongList} from '../api/index.js'
// import {getSongList} from '../api/index.js'
export default {
    // 注册组件
    components:{
        songList
    },
    data() {
        return {
            inputValue:''
        }
    },
    created() {
         // 1.获取推荐音乐
         getSong().then(res=>{
            this.$refs.songList.list=res.data.result
            // window.console.log(res);
        })
        //  axios({
        //     url:'https://autumnfish.cn/personalized/newsong?dsad'+Math.random()*999
        // }).then(res=>{
        //     this.$refs.songList.list=res.data.result
        //     // window.console.log(res);
        // })
    },
    methods: {
        search(){
        // 2.获取歌曲搜索列表
        getSongList({keywords:this.inputValue ,num:Math.random()*999}).then(res=>{
            //2.1给数据重新赋值
            let _temp=res.data.result.songs
            _temp.forEach(item=>{
                item.song={
                    artists:item.artists,
                    album:item.album,
                    duration:item.duration
                }
            })
            this.$refs.songList.list=_temp
            window.console.log(res);
        })
        // axios({
        //     url:'https://autumnfish.cn/search?keywords= '+this.inputValue
        // }).then(res=>{
        //     //给数据重新赋值
        //     let _temp=res.data.result.songs
        //     _temp.forEach(item=>{
        //         item.song={
        //             artists:item.artists,
        //             album:item.album,
        //             duration:item.duration
        //         }
        //     })
        //     this.$refs.songList.list=_temp
        //     window.console.log(res);
        // })
        }
    },
}   
</script>

<style>
    .newMusic{
        text-align: center;
    }
    .newMusic input{
        width: 350px;
        height: 40px;
        margin-bottom: 20px;
        padding-left: 15px;
        outline: none;
    }
</style>